<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>VUE 学习</title>
	</head>

	<body>
		<div id="app">
			<h1> 模板插值</h1>
			<div id="app-7">
				<h2>文本插值</h2>
				<span>Message: {{ msg }}</span><br/>
				<span v-once>这个指令表示执行一次性插值,<br/> 这个值将不会改变: {{ msg }}</span>
				<button v-on:click="msg='Hello'">改变</button>
				
				<h2>输出原始的html</h2>
				<p v-html="rawHtml">
				</p>
				<p> 你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。</p>
				
				<h2>在标签中使用完整的javascript表达式</h2>
				<p>{{ value +1}}</p>
				<p>{{msg.split('').reverse().join('')}}</p>
				<p>这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。</p>
				
				<pre><span>这是<strong>语句</strong>，不是表达式 </span>{  { var a = 1 }  } 
				</pre>
				<span>流控制也不会生效，请使用三元表达式</span>
				<pre>{ { if (ok) { return message }  } }</pre>
				
				<h1>v- 指令</h1>
				<h2>前缀的特殊特性。</h2>
				<p v-if="ok">指令特性的值预期是单个 JavaScript 表达式 指令</p>
				<h2>指令参数</h2>
				<a v-bind:href="url">v-bind:href， 其中href是v-bind的参数，其意思是将该元素的href标签的值与url变量的值绑定</a>
				<h2>指令修饰符</h2>
				<form v-on:submit.prevent="onSubmit">v-on:submit.prevent 提交 prevent 表示触发事件event.preventDefault() </form>
				<h2>指令缩写 v-bind </h2>
				<a v-bind:href="url"><strong>v-bind</strong>完整语法  v-bind:href</a><br/>
				<a :href="url"><strong>v-bind</strong>缩写语法  :href</a><br/>
				
				<a v-on:click="url"><strong>v-on</strong>完整语法  v-on:click</a><br/>
				<a @click="url"><strong>v-on</strong>缩写语法  @click</a>
			</div>
		</div>

	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script type="text/javascript">
		
		var app7 = new Vue({
			el: '#app-7',
			data: {
				url:"www.baidu.com",
				a:2,
				ok:true,
				value:1,
				msg:"文本插值",
				rawHtml:"<span style=color:red>这个值是红色</span>"
			},
		})
	</script>

</html>